<template>
  <div id="car">
    <!-- 购物车 -->
    <div class="goodslist" v-if="goodslist.length">
      <div class="title">
        <p>共{{total[0]}}件商品</p>
        <van-tag color="#f2826a" plain>领券</van-tag>
      </div>
      <div class="goodcons">
        <div class="goodcon" v-for="(item) in goodslist" :key="item.id">
          <van-checkbox v-model="item.checked" @click="click(item.id)" checked-color="#FF5900"></van-checkbox>
          <van-card
            :price="Number(item.price).toFixed(2)"
            :desc="(item.fullname).trim().split(/\s+/).slice(-1).join('')"
            :title="item.fullname"
            :thumb="item.image"
          >
            <div slot="footer">
              <van-stepper
                v-model="item.num"
                integer
                @change="changeQuantities"
                @plus="add(item.id)"
                @minus="cut(item.id)"
              />
              <!-- <van-button size="mini" @click="add">+</van-button>
              <input type="text" v-model="item.num" id="goodnum" />
              <van-button size="mini" @click="cut">-</van-button>-->
            </div>
          </van-card>
        </div>
      </div>
      <div class="foot">
        <div class="l_footer">
          <van-checkbox v-model="allcheaked" checked-color="#FF5900" @click="allCheck()"></van-checkbox>
          <span class="allsel">全选</span>
          <span class="del" @click="del()">删除</span>
        </div>
        <div class="r_footer">
          <span>
            总计：
            <i class="total">￥{{total[1].toFixed(2)}}</i>
          </span>
          <van-button color="linear-gradient(to right, #FD9B31 , #FD5900)">结算({{total[2]}})</van-button>
        </div>
      </div>
    </div>
    <!-- 没有商品 -->
    <div class="nogoods" v-if="!goodslist.length">
      <div class="imgcon">
        <img src="http://ifile.360hwj.com/wap/images/cart_empty200.gif" alt srcset />
      </div>
      <p class="txtcon">购物车没有商品哦~</p>
    </div>
    <!-- 推荐 -->
    <div class="recom">
      <Recommend />
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Recommend from "../components/recommend";
export default {
  computed: {
    //全选
    allcheaked: {
      get() {
        return this.$store.state.cart.goodslist.every(item => item.checked);
      },
      set(val) {
        this.$store.state.cart.goodslist.forEach(item => {
          item.checked = val;
        });
      }
    },
    goodslist() {
      return this.$store.state.cart.goodslist;
    },
    ...mapGetters(["total"])
  },
  methods: {
    // ...mapMutations(["del"])
    async allCheck() {
      let phonenumber = this.$store.state.common.user.phone;
      let a = await this.$axios.get(
        "http://localhost:1912/cart/updatechecked",
        {
          params: {
            phonenumber: phonenumber
          }
        }
      );
      window.console.log(a);
    },
    async del() {
      let phonenumber = this.$store.state.common.user.phone;
      let a = await this.$axios.get(
        "http://localhost:1912/cart/removecart",
        {
          params: {
            phonenumber: phonenumber,
            checked: true
          }
        }
      );
      if (a.data.code) {
        this.$store.dispatch("getGoodsList", { phonenumber });
      }
      // window.console.log(b);
    },
    changeQuantities(value) {
      window.console.log(value);
    },
    //勾选
    async click(id) {
      // this.$store.commit("clk", id);
      let a = await this.$axios.get(
        "http://localhost:1912/cart/updatechecked",
        {
          params: {
            phonenumber: this.phonenumber,
            id: id
          }
        }
      );
      window.console.log(a);
    },
    //加数量
    async add(id) {
      // window.console.log(this.phonenumber);
      let a = await this.$axios.get("http://localhost:1912/cart/addcart", {
        params: {
          phonenumber: this.phonenumber,
          username: this.phonenumber,
          id: id
        }
      });
      if (a.data.code) {
        this.$store.dispatch("getGoodsList");
      }
    },
    //减数量
    async cut(id) {
      let a = await this.$axios.get("http://localhost:1912/cart/subcart", {
        params: {
          phonenumber: this.phonenumber,
          username: this.phonenumber,
          id: id
        }
      });
      if (a.data.code) {
        this.$store.dispatch("getGoodsList");
      }
    }
    //生成订单
  },
  components: {
    Recommend
  },
  async created() {
    let phonenumber = this.$store.state.common.user.phone;
    this.phonenumber = phonenumber;
    if (phonenumber) {
      this.$store.dispatch("getGoodsList", { phonenumber });
    }
  },
  data() {
    return {
      phonenumber: ""
    };
  }
};
</script>

//样式
<style lang="scss">
#car {
  background-color: #f6f6f6;
  height: 100%;
  .goodslist {
    .title {
      display: flex;
      padding: 0.4rem;
      justify-content: space-between;
      background-color: #fff;
    }
    #goodnum {
      width: 0.666667rem;
      text-align: center;
      height: 0.293333rem;
      line-height: 0.293333rem;
    }
    .goodcon {
      background-color: #fff;
      display: flex;
      margin-bottom: 0.013333rem;
      .van-checkbox {
        padding: 0 0.4rem;
      }
      .van-card {
        width: 8.72rem;
        background-color: #fff;
        .van-button {
          font-size: 0.533333rem;
          font-weight: bold;
        }
      }
    }
    //底部
    .foot {
      position: fixed;
      background: #fff;
      bottom: 0.666667rem;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      width: 10rem;
      height: 1.333333rem;
      line-height: 1.333333rem;
      padding: 0 0.32rem;
      box-sizing: border-box;
      .l_footer {
        display: flex;
        align-content: center;
        font-size: 0.4rem;
        .del,
        .allsel {
          margin-left: 0.32rem;
        }
      }
      .r_footer {
        font-size: 0.4rem;
        .total {
          color: #f85b06;
        }
        .van-button {
          margin-left: 0.266667rem;
        }
      }
    }
  }
  .nogoods {
    padding-top: 1.733333rem;
    padding-bottom: 0.666667rem;
    margin: 0 auto;
    text-align: center;
    .imgcon {
      img {
        width: 3.2rem;
        height: 3.386667rem;
      }
    }
    .txtcon {
      margin: 0.986667rem;
      color: #ababab;
      font-size: 0.426667rem;
    }
  }
  .recom {
    margin-top: 0.666667rem;
    font-size: 0.373333rem;
    height: 0.933333rem;
    line-height: 0.933333rem;
    padding: 0.266667rem 0.373333rem;
  }
}
</style>